#friend{
    color: white;
    /*background: rgb(95, 194, 3);*/
}
ul,li{
    list-style: none;
}
#friend {
        background-size: 100% 100% ;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 56;
    }

.topui-left{
    transform: translateY(20%);
    width: 50%;
    height: 10%;
}

.topui-left .button{
    transform: translateY(10%);
}

.topui-left .button .black{
    position: absolute;
    transform: translateX(10%);
}

.topui-left .button .home{
    position: absolute;

    transform: translateX(77%);

}

.topui-left .button .tips{
    position: absolute;

transform: translateX(850%);
}

.topui-right{
    left: 50%;
    width: 50%;
    height: 10%;
    transform: translateY(-65%);
    font-size: 180%;
    position: absolute;
}

.topui-right .aboutme{

}

.topui-right .aboutme .text{
    transform: translateX(27%);
    width: 45%;
    height: auto;
    position: absolute;
}

.topui-right .aboutme .name{
    transform: translate(50%,10%);
    top: 100%;
    position: relative;
}

.topui-right .aboutme .level{
    transform: translate(70%,-130%);
    width: 50%;
    height: 50%;
}

.topui-right .aboutme .level .img{
    width: 21%;
    height: auto;
}

.topui-right .aboutme .level .text{
    width: 10%;
    height: auto;
    transform: translate(55%,-200%);
}

.centerui-left{
    transform:translateX(-1.5%);
}

.centerui-left img{
    margin-top:0.5%;
    width: 16%;
    height: 11%;
}

.maincard{
    background-size: 100% 74%;
    position: absolute;
    transform: translateX(26%);
    top: 2%;
    width: 75%;
    height: 154%;
}

.maincard .bgimg img{
    transform: translate(-2%,14%);
    z-index: -1;
    width: 100%;
    height: 50%;
}